<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form target="_blank" action="https://www.baidu.com/s">
    <input autocomplete="off" name="wd" type="text">
    <button>搜索</button>
</form>
<div id="searchDiv"></div>
</body>
<script src="lib/jsonp.js"></script>
<script>
    const myInput = document.querySelector("input");
    const searchDiv = document.querySelector("#searchDiv");
    let timer = null;
    myInput.oninput = function(){
        // 防抖：在指定的时间内执行一次
        clearTimeout(timer);
        timer = setTimeout(async ()=>{
            console.log(this.value);
            // https://www.baidu.com/sugrec?prod=pc&wd=12&cb=fn
            const {g=[]} = await jsonp("https://www.baidu.com/sugrec",{
                params:{
                    prod:"pc",
                    wd:this.value
                },
                jsonp:"cb",// 如果省略该项，默认为callback
            })
            searchDiv.innerHTML = g.map(v=>(`
                <p>${v.q}</p>
            `)).join("");
            console.log(g);
        },300);


        // console.log(this.value);
        // // https://www.baidu.com/sugrec?prod=pc&wd=12&cb=fn
        // const {g=[]} = await jsonp("https://www.baidu.com/sugrec",{
        //     params:{
        //         prod:"pc",
        //         wd:this.value
        //     },
        //     jsonp:"cb",// 如果省略该项，默认为callback
        // })
        // searchDiv.innerHTML = g.map(v=>(`
        //     <p>${v.q}</p>
        // `)).join("");
        // console.log(g);

    }
</script>
</html>